/**
 * Created by yujianfu on 2019/9/11.
 */
import React from 'react'

import {Table, Form, DatePicker, Button, Select, Radio} from 'antd'

const {RangePicker} = DatePicker
const FormItem = Form.Item
const {Option} = Select;
import {fetchPost} from '../../utils/request'
import moment from 'moment'
import ReportCommon from './ReportCommon'

class RepaymentChannel extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      params: {
        loanType: "0,1",
        startDate: moment(moment().subtract(7, 'days'), 'YYYY-MM-DD'),
        endDate: moment(moment(), 'YYYY-MM-DD'),
        repaymentChannelCode: 0,
        appCode: 0
      },
      appList: [],
      repaymentChannelList: [],
      startDate: null,
      endDate: null,
      loanType: 1
    }
  }

  componentDidMount() {
    this.getAppList();
    this.getRepaymentChannelList();
  }


  getAppList() {
    var queryKey = "appList";
    fetchPost(`/bizStats/general/query`, {queryKey}).then(json => {

      if (json && json.data != null && JSON.stringify(json.data) != '{}' && json.code === 0) {
        let data = json.data[queryKey]
        this.setState({
          appList: data,
          params: {
            ...this.state.params,
          }
        })
      }
    });
  }

  getRepaymentChannelList() {
    var queryKey = "repaymentChannelList";
    fetchPost(`/bizStats/general/query`, {queryKey}).then(json => {

      if (json && json.data != null && JSON.stringify(json.data) != '{}' && json.code === 0) {
        let data = json.data[queryKey]
        this.setState({
          repaymentChannelList: data,
          params: {
            ...this.state.params,
          }
        })
      }
    });
  }

  handleSubmit = (e) => {
    e.preventDefault()
    this.props.form.validateFields((err, fieldsValue) => {
      if(!err){
        const rangeValue = fieldsValue['range-picker']
        const loanType = fieldsValue['loanType']
        let startDate = moment(rangeValue[0], 'YYYY-MM-DD')
        let endDate = moment(rangeValue[1], 'YYYY-MM-DD')
        let appCode = fieldsValue['appCode'];
        let repaymentChannelCode = fieldsValue['repaymentChannelCode'];

        this.setState({
          params: {startDate, endDate, loanType, appCode, repaymentChannelCode}
        })
      }
    })
  }

  render() {

    const dateFormat = 'YYYY-MM-DD'
    const rangeConfig = {
      rules: [{type: 'array', required: true, message: 'Please select Time!'}],
      initialValue: [this.state.startDate != null ? moment(this.state.startDate, dateFormat) : moment().subtract(7, 'days'),
        this.state.endDate != null ? moment(this.state.endDate, dateFormat) : moment()]
    }

    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
    }
    const {getFieldDecorator} = this.props.form;

    return (
      <div>
        <Form layout="inline" onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayout}
            label="Date"

          >
            {getFieldDecorator('range-picker', rangeConfig)(
              <RangePicker/>
            )}
          </FormItem>
          <FormItem label="App" hasFeedback>
            {getFieldDecorator('appCode',{
              rules: [{required: true, message: 'Please select app!'}]
            })(
              <Select style={{"width": "120px"}}
                      showSearch={true}
                      optionFilterProp="children"
                      filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
                {this.state.appList.map((v, k) => {
                  return <Option key={v.code} value={v.code}>{v.name}</Option>
                })}
              </Select>)}
          </FormItem>
          <FormItem label="Repayment channle" hasFeedback>
            {getFieldDecorator('repaymentChannelCode',{
              rules: [{required: true, message: 'Please select channel!'}]
            })(
              <Select style={{"width": "120px"}}
                      showSearch={true}
                      optionFilterProp="children"
                      filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
                {this.state.repaymentChannelList.map((v, k) => {
                  return <Option key={v.code} value={v.code}>{v.name}</Option>
                })}
              </Select>)}
          </FormItem>

          <FormItem
            label="LoanType"
          >
            {getFieldDecorator('loanType', {initialValue: "0,1"})(
              <Radio.Group>
                <Radio.Button value="0,1">All</Radio.Button>
                <Radio.Button value="1">New</Radio.Button>
                <Radio.Button value="0">Repeat</Radio.Button>
              </Radio.Group>
            )}
          </FormItem>


          <FormItem>
            <Button type="primary" htmlType="submit">Search</Button>
          </FormItem>

        </Form>

        <br/>
        <br/>

        <br/>
        <br/>
        <ReportCommon params={this.state.params} queryKey="paymentChannelStatistics"
                      name={"payment channel statistics"}/>

        <br/>
      </div>
    )
  }
}

const a = Form.create()(RepaymentChannel)
export default a

